<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas 采用色彩渐变</title>
    <style>
      body {
        margin: 0;
        background: #000;
        overflow: hidden;
      }
      .demo {
        height: 100vh;
        width: 100vw;
      }
      canvas {
        display: block;
        width: 100%;
        height: 140%;
      }
    </style>
  </head>
  <body>
    <div id="demo">
      <canvas id="canvas"></canvas>
    </div>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const width = window.innerWidth * devicePixelRatio,
        height = window.innerHeight * devicePixelRatio;

      canvas.width = width;
      canvas.height = height;

      const centerX = width; // 圆心在右上角
      const centerY = 0; // 圆心在右上角
      const arcs = [];
      const numArcs = 600; // 轨迹数量（保证持续填充）
      const speed = 0.001; // **统一的旋转速度**

      const blurCanvas = document.createElement("canvas");
      const blurCtx = blurCanvas.getContext("2d");

      blurCanvas.width = width;
      blurCanvas.height = height;
      // 生成多个圆弧
      for (let i = 0; i < numArcs; i++) {
        let angle = 0.4 * Math.PI + Math.PI * 0.7 * (i / numArcs); // **均匀分布**
        let radius = Math.random() * width + 200; // 随机半径
        let startAngle = angle;
        let endAngle = angle + 0.2; // 圆弧长度
        let baseColor = Math.random() * 360; // 颜色基调 (HSL 颜色)

        arcs.push({ radius, startAngle, endAngle, baseColor });
      }
      console.log(arcs);
      function draw() {
        // blurCtx.fillStyle = "rgba(0, 0, 0, 0.01)";  // 渐隐残影

        blurCtx.fillRect(0, 0, width, height);

        blurCtx.lineWidth = 6;
        blurCtx.lineCap = "round";

        arcs.forEach((arc, index) => {
          arc.startAngle += speed; // **统一的旋转速度**
          arc.endAngle += speed;

          // **如果弧线超出第三象限（超过 3π/2），则重新循环回 π**
          if (arc.startAngle > 1.1 * Math.PI) {
            arc.startAngle = 0.4 * Math.PI;
            arc.endAngle = arc.startAngle + 0.2; // 重新定义弧线长度
            arc.radius = Math.random() * width + 200; // 重新设定随机半径
          }

          // 创建柔和的渐变颜色
          let gradient = blurCtx.createLinearGradient(
            centerX + arc.radius * Math.cos(arc.startAngle),
            centerY + arc.radius * Math.sin(arc.startAngle),
            centerX + arc.radius * Math.cos(arc.endAngle),
            centerY + arc.radius * Math.sin(arc.endAngle)
          );
          gradient.addColorStop(0, `hsla(${arc.baseColor}, 70%, 70%, 0)`); // 柔和的深色，透明度 40%
          gradient.addColorStop(1, `hsla(${arc.baseColor}, 70%, 80%, 0.8)`); // 柔和的浅色，透明度 80%

          blurCtx.strokeStyle = gradient;
          blurCtx.beginPath();
          blurCtx.arc(
            centerX,
            centerY,
            arc.radius,
            arc.startAngle,
            arc.endAngle
          );
          blurCtx.stroke();
        });

        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(blurCanvas, 0, 0);
        requestAnimationFrame(draw);
      }
      draw();
    </script>
  </body>
</html>
